<!-- item template -->
<div id="catalog" @contextmenu.prevent.stop="" class="tabbable-panel catalog">
  <div class="tabbable-line">
    <ul class="nav nav-tabs catalalog-nav-tabs" role="tablist">
      <li v-if="hasLayers" role="presentation"  :class="{ active: activeTab === 'layers' && 'hasLayers' }" :style="{width: hasBaseLayers ? '32%' : '48%'}">
        <a href="#tree" aria-controls="tree" role="tab" data-toggle="tab" data-i18n="tree" v-t="'data'"></a>
      </li>
      <li v-if="hasBaseLayers" role="presentation" :class="{ active: activeTab === 'baselayers' }" :style="{width: !hasLayers ? '100%' : '32%'}">
        <a href="#baselayers" aria-controls="baselayers" role="tab" data-toggle="tab" data-i18n="baselayers" v-t="'baselayers'"></a>
      </li>
      <li v-if="showlegend" role="presentation" :class="{ active: activeTab === 'legend' }" :style="{width: hasBaseLayers ? '32%' : '48%'}">
        <a href="#legend" aria-controls="legend" role="tab" data-toggle="tab" data-i18n="legend" v-t="'legend'"></a>
      </li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane" :class="{ active: activeTab === 'layers' && 'hasLayers' }" id="tree">
        <div id="toc_layer_help_text" v-t="'catalog_items.helptext'">
          <span class="info_helptext_button">i</span>
        </div>
        <ul class="tree-root" v-for="_layerstree in state.layerstrees">
          <tristate-tree
            :highlightlayers="state.highlightlayers"
            :layerstree="layerstree"
            class="item"
            :parentFolder="false"
            :root="true"
            :parent_mutually_exclusive="false"
            v-for="layerstree in _layerstree.tree"
            :storeid="_layerstree.storeid"
            :key="layerstree.id">
          </tristate-tree>
        </ul>
        <ul>
          <tristate-tree  :externallayers="state.externallayers" :layerstree="layerstree" class="item" v-for="layerstree in state.externallayers" :key="layerstree.id">
          </tristate-tree>
        </ul>
        <ul v-for="layersgroup in state.layersgroups">
          <layers-group :layersgroup="layersgroup"></layers-group>
        </ul>
      </div>
      <div class="tab-pane baselayers" v-if="hasBaseLayers" role="tabpanel"  :class="{ active: activeTab === 'baselayers' || !hasLayers }" id="baselayers">
        <ul id="baselayers-content">
          <li v-if="!baselayer.fixed" v-for="baselayer in baselayers" :key="baselayer.title">
            <img :src="getSrcBaseLayerImage(baselayer)" @click.stop="setBaseLayer(baselayer.id)" class="img-responsive img-thumbnail baselayer" :style="{opacity: currentBaseLayer === baselayer.id ? 1 : 0.5}" >
            <div class="text-center">{{ baselayer.title }}</div>
          <li @click.stop="setBaseLayer(null)">
            <img :src="getSrcBaseLayerImage(null)" class="img-responsive img-thumbnail baselayer" :style="{opacity: currentBaseLayer === null ? 1 : 0.5}">
            <div class="text-center" v-t="'nobaselayer'"></div>
          </li>
        </ul>
      </div>
      <layerslegend @showlegend="showLegend" :legend="legend" :active="activeTab === 'legend'" v-for="_layerstree in state.layerstrees" :layerstree="_layerstree" :key="_layerstree.id"></layerslegend>
    </div>
  </div>
  <ul id="layer-menu" v-click-outside-layer-menu="closeLayerMenu"  tabindex="-1" v-if="layerMenu.show"  :style="{top: layerMenu.top + 'px', left: layerMenu.left + 'px' }">
    <li v-if="canZoom(layerMenu.layer)" @click.prevent.stop="zoomToLayer">
      <span :class="g3wtemplate.getFontClass('search')"></span>
      <span class="item-text" v-t="'catalog_items.contextmenu.zoomtolayer'"></span>
    </li>
    <li v-if="layerMenu.layer.openattributetable" @click.prevent.stop="showAttributeTable(layerMenu.layer.id)">
      <bar-loader :loading="layerMenu.loading.data_table"></bar-loader>
      <span :class="g3wtemplate.getFontClass('list')"> </span>
      <span class="item-text" v-t="'catalog_items.contextmenu.open_attribute_table'"></span>
    </li>
    <li @click.prevent.stop="" v-if="layerMenu.layer.external && !layerMenu.layer.source" @mouseleave.self="showColorMenu(false,$event)" @mouseover.self="showColorMenu(true,$event)"> Setta/Cambia Colore <i :class="g3wtemplate.getFontClass('arrow-right')" style="padding-left:10px;" aria-hidden="true"></i>
      <ul v-if="layerMenu.colorMenu.show" style="position:fixed" :style="{ top: layerMenu.colorMenu.top + 'px', left: layerMenu.colorMenu.left +   'px' }">
        <li style="padding:0;">
          <chrome-picker
            @click.prevent.stop=""
            v-model="layerMenu.colorMenu.color"
            @change-color="onChangeColor"
            style="width: 100%">
          </chrome-picker>
        </li>
      </ul>
    </li>
    <li v-if="canDownloadShp(layerMenu.layer.id)">
      <div @click.prevent.stop="downloadShp(layerMenu.layer.id)" >
        <bar-loader :loading="layerMenu.loading.shp"></bar-loader>
        <span  :class="g3wtemplate.getFontClass('download')"></span>
        <span class="item-text">Download shapefile</span>
      </div>
    </li>
    <li v-if="canDownloadXls(layerMenu.layer.id)">
      <div @click.prevent.stop="downloadXls(layerMenu.layer.id)" >
        <bar-loader :loading="layerMenu.loading.xls"></bar-loader>
        <span :class="g3wtemplate.getFontClass('excel')"></span>
        <span class="item-text">Download Xls</span>
      </div>
    </li>
    <li v-if="canShowWmsUrl(layerMenu.layer.id)">
      <div @click.prevent.stop="copyWmsUrl($event, layerMenu.layer.id)" style="display: flex; max-width:300px; align-items: center;">
        <span :class="g3wtemplate.getFontClass('copy')"></span>
        <div style="display: inline-flex; justify-content: space-between; width: 100%; align-items: baseline">
          <span class="item-text catalog-menu-wms skin-tooltip-top" data-toggle="tooltip" :title="copywmsurltooltip">WMS URL</span>
          <span @click.prevent.stop="" class="bold catalog-menu-wms wms-url-tooltip" style="color: #000000" :class="g3wtemplate.getFontClass('eye')" data-placement="bottom" data-toggle="tooltip" :title="getWmsUrl(layerMenu.layer.id)"></span>
        </div>
      </div>
    </li>
  </ul>
</div>
